<template>
  <view class="address">
    <ul>
      <li v-for="(value,index) in addressList" :key="index" @click="selectAddress(value)">
        <view class="address_details">
          <view class="address_details_name">
            {{value.consignee}}
			<text style="margin-left: 5px;">{{value.phone}}</text>
            <span class="default" v-if="value.is_default=='1'">默认</span>
          </view>
          <view class="address_details_city">
            {{value.province}}-{{value.city}}-{{value.area}}-{{value.address}}
          </view>
        </view>
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/f6/wx/edit.png" class="address_edit" @click.stop="editAddress(value.id)"/>
      </li>
    </ul>
	<view class="null" v-if="addressList.length==0">空空如也~</view>
    <view class="address-btn">
       <view @click="toInputAddress">
         <view>添加地址</view>
        </view>
    </view>
  </view>
</template>

<script>


export default {
  data () {
    return {
      addressList:"",
      orderId:"",
      consignee:'',
      postcode:'',
      province:'',
      city:'',
      area:'',
      add_detail:'',
      phone:'',
	  type: ''
    }
  },
  methods:{
	getLocation(){
		console.log("获取位置信息")
		wx.getLocation({
		 type: 'gcj02', //返回可以用于wx.openLocation的经纬度
		 success (res) {
		   const latitude = res.latitude
		   const longitude = res.longitude
		   wx.setStorageSync("latitude",latitude)
		   wx.setStorageSync("longitude",longitude)
		  
		 },
		 fail() {
		 	wx.showToast({
				title:"获取地址失败",
				icon:"none",
				success:()=>{
					wx.showModal({
						title:"提示",
						content:"请打开右上角设置，重新授权使用位置信息",
						showCancel:false
					})
				}
			})
			
		 }
		})
	},
    async getAddressList(){
	  wx.showLoading({
		title: '加载中'
	  })
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$api.getShippingAddress({user_token:userToken,page: 1,limit: 99},this.$baseUrl)
      this.addressList=res.data.data
      if(this.addressList.length==0){
        this.$store.dispatch('setAddress','')
      }
      wx.hideLoading()
    },
    editAddress(id){
		uni.navigateTo({
			url: `../inputAddress/inputAddress?id=${id}`
		})
    },
    selectAddress(address){
      if(this.type!='address'){
        this.$store.dispatch('setAddress',address)
		wx.navigateBack({
			delta: 1
		})
      }

    },
    toInputAddress(){
      uni.navigateTo({
      	url: '../inputAddress/inputAddress'
      })
    },

  },
  onShow(){
    this.getAddressList()
	this.getLocation()
  },
  onLoad(options){
    this.type=options.type   //这里的type如果是address   那么就代表他是我个人中心那里点击进来的，所以不能执行选择地址这个函数
    this.orderId=options.orderId
  }
}
</script>

<style scoped lang="scss" type="text/css">
  .address{
    width:100%;
	max-height: calc(100vh - 70px);
	overflow: auto;
    ul
    {
      width:100%;
      li{
		padding: 10px 0;
        width:100%;
        height:60px;
        display:flex;
        background-color:#fff;
        justify-content:space_around;
        border-bottom:1px solid #EEEEEE;
        .address_select{
          width:20px;
          height:20px;
          margin:25px 20px;
        }
        .address_details{
          margin-left:10px;
          flex:1;
          overflow: hidden;
          .address_details_name{
            width:100%;
            line-height:30px;
			color: #000000;
			font-weight: bold;
            .default{
              color: #666666;
              font-size: 24rpx;
              padding:0 10rpx;
              border-radius: 6rpx;
              border: 1rpx solid #b4b4b4;
			  margin-left: 5px;
            }
          }
          .address_details_city{
            width:100%;
            line-height:30px;
			color: #999999;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
        .address_edit{
          width:20px;
          height:20px;
          margin:15px 30px;
        }
      }
    }
    &-btn{
      width:90%;
      line-height:40px;

      text-align:center;
      position: fixed;
      bottom:20px;
      left:5%;
      color:#fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      &>view{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color:red;
        border-radius:3px;
        width: 100%;
        img{
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
      &>view:last-child{
        background: #2CB85F;
		border-radius: 25px;
		
      }
    }
  }
</style>
